$(function () {
  const { layer } = layui;

  //绑定移入移出事件
  $(".layui-card-body").on("mouseover mouseleave", "img", function (event) {
    if (event.type === "mouseover") {
      //获取点击时的位置
      const index = $(this).index() + 1;
      for (let i = 0; i < index; i++) {
        $(this).parent(".row").children().eq(i).attr("src", "./img/2.png");
      }
    } else if (event.type === "mouseleave") {
      $(this).parent(".row").children().attr("src", "./img/1.png");
    }
  });
  $(".layui-card-body").on("mouseleave", ".row", function () {
    if ($(this).children("span").length !== 0) {
      let index = $(this).children("span").html()[0];
      for (let i = 0; i < index; i++) {
        $(this).children().eq(i).attr("src", "./img/2.png");
      }
    }
  });
  function mouseIndex() {
    let index;
    return function () {
      $(this).siblings().attr("src", "./img/1.png");
      index = $(this).index() + 1;
      for (let i = 0; i < index; i++) {
        $(this).parent(".row").children().eq(i).attr("src", "./img/2.png");
      }
      //如果没有为false 让row里边添加span,如果有span那就往里边更改数据
      if ($(this).siblings("span").length) {
        $(this).siblings("span").html(`${index}分`);
      } else {
        $(this).parent(".row").append(` <span>${index}分</span>
`);
      }
    };
  }
  const Index = mouseIndex();
  //绑定点击事件
  $(".layui-card-body").on("click", "img", Index);
  //绑定点击事件
  $("#add").on("click", function () {
    $(".layui-card-body").append(`  <div class="row">
          <img src="./img/1.png" alt="" />
          <img src="./img/1.png" alt="" />
          <img src="./img/1.png" alt="" />
          <img src="./img/1.png" alt="" />
          <img src="./img/1.png" alt="" />
        </div>`);
  });
  //数据
  const contentList = [
    {
      title: "不满意",
      content: "不满意事物与图片不相符，物流很慢",
    },
    {
      title: "基本满意",
      content: "基本满意事物与图片不相符，单速度很快",
    },
    {
      title: "一般",
      content: "一般事物与图片不相符，物流很慢",
    },
    {
      title: "满意",
      content: "满意事物与图片不相符，物流很慢",
    },
    {
      title: "非常满意",
      content: "非常满意事物与图片相符,物美价廉，物流很慢",
    },
  ];
  $(".layui-btn-warm").on("click", function () {
    layer.confirm(
      "确定之后不可修改  并移除所有事件",
      { icon: 3, title: "提示" },
      function (index) {
        console.log(1);
        if ($("span").length !== 0) {
          let fraction;
          for (let i = 0; i < $(".row").length; i++) {
            if (
              $(".layui-card-body .row").eq(i).children("span").length !== 0 &&
              $(".layui-card-body .row").eq(i).children("div").length === 0
            ) {
              fraction =
                $(".layui-card-body .row").eq(i).children("span").html()[0] - 1;

              $(".layui-card-body .row").eq(i).append(`  <div>
  ${contentList[fraction].title}
</div>
<div>${contentList[fraction].content}</div>
`);
            }
          }
        }
        $(".layui-card-body").unbind();

        $(".layui-btn-warm")[0].disabled = true;
        $("#add")[0].disabled = true;
        $(".layui-btn-warm").css("background", "#ccc");
        $("#add").css("background", "#ccc");
        layer.close(index);
      }
    );
  });
});
